<template>
  <div>
    <div id="MapChart2" />
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
// lib
import * as echarts from "echarts";
// components & widgets
import ResizeChartVm from "@/public/base/ResizeChartVm";
import { openOption } from "../../../http/model";
import { show } from "../../../http/core";
// config
// script & public
// controller & service
// interface
// 其它

@Component
export default class LineChart extends ResizeChartVm {
  mounted() {
    this.initChart();
  }
  initChart() {
    const el = document.getElementById("MapChart2");
    if (!el) {
      this.$message.error("没有图表挂载点");
      return;
    }
    this.chartE = echarts.init(el);
    const dataMax = [
      {
        name: "易用性",
        max: 100,
      },
      {
        name: "功能",
        max: 100,
      },
      {
        name: "拍照",
        max: 100,
      },
      {
        name: "跑分",
        max: 100,
      },
      {
        name: "续航",
        max: 100,
      },
    ];

    const options: echarts.EChartsOption = {
      title: {
        text: "某站点用户访问来源",
        subtext: "纯属虚构",
        left: "center",
      },
      // radar: {
      //   indicator: dataMax, // 配置各个维度的最大值
      //   shape: "polygon", // 配置雷达图最外层的图形 circle polygon
      // },
      series: [
        // {
        //   type: "radar", // radar 此图表时一个雷达图
        //   label: {
        //     // 设置标签的样式
        //     show: true, // 显示数值
        //   },
        //   areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
        //   data: [
        //     {
        //       name: "华为手机1",
        //       value: [80, 90, 80, 82, 90],
        //     },
        //     {
        //       name: "中兴手机1",
        //       value: [70, 82, 75, 70, 78],
        //     },
        //   ],
        // },
        {
          type: "gauge",
          data: [
            {
              // 数据项的名称

              // 数据项值8
              value: 10,
            },
            {
              value: 20,
            },
          ],
        },
      ],
    };
    this.chartE.setOption(options);
  }
}
</script>

<style scoped lang="scss">
#MapChart2 {
  width: 50%;
  height: 300px;
}
</style>
